<script type="module">
  import { createApp } from '../src'

  function valueToPoint(value, index, total) {
    var x = 0
    var y = -value * 0.8
    var angle = ((Math.PI * 2) / total) * index
    var cos = Math.cos(angle)
    var sin = Math.sin(angle)
    var tx = x * cos - y * sin + 100
    var ty = x * sin + y * cos + 100

    if (ty < 0) debugger
    return {
      x: tx,
      y: ty
    }
  }

  createApp({
    newLabel: '',
    stats: [
      { label: 'A', value: 100 },
      { label: 'B', value: 100 },
      { label: 'C', value: 100 },
      { label: 'D', value: 100 },
      { label: 'E', value: 100 },
      { label: 'F', value: 100 }
    ],

    get pointsString() {
      return this.getPoints()
        .map(({ x, y }) => `${x},${y}`)
        .join(' ')
    },

    getPoints(offset = 0) {
      const total = this.stats.length
      return this.stats.map((stat, i) => ({
        ...valueToPoint(+stat.value + offset, i, total),
        label: stat.label
      }))
    },

    add(e) {
      e.preventDefault()
      if (!this.newLabel) return
      this.stats.push({
        label: this.newLabel,
        value: 100
      })
      this.newLabel = ''
    },

    remove(stat) {
      if (this.stats.length > 3) {
        this.stats.splice(this.stats.indexOf(stat), 1)
      } else {
        alert("Can't delete more!")
      }
    }
  }).mount()
</script>

<div v-scope>
  <svg width="200" height="200">
    <g>
      <polygon :points="pointsString"></polygon>
      <circle cx="100" cy="100" r="80"></circle>
      <text v-for="{ x, y, label } in getPoints(10)" :x="x" :y="y">{{ label }}</text>
    </g>
  </svg>
  <!-- controls -->
  <div v-for="stat in stats">
    <label>{{stat.label}}</label>
    <input type="range" v-model="stat.value" min="0" max="100" />
    <span>{{stat.value}}</span>
    <button @click="remove(stat)" class="remove">X</button>
  </div>
  <form id="add">
    <input name="newlabel" v-model="newLabel" />
    <button @click="add">Add a Stat</button>
  </form>
  <pre id="raw">{{ stats }}</pre>
</div>

<style>
  body {
    font-family: Helvetica Neue, Arial, sans-serif;
  }

  polygon {
    fill: #42b983;
    opacity: 0.75;
  }

  circle {
    fill: transparent;
    stroke: #999;
  }

  text {
    font-family: Helvetica Neue, Arial, sans-serif;
    font-size: 10px;
    fill: #666;
  }

  label {
    display: inline-block;
    margin-left: 10px;
    width: 20px;
  }

  #raw {
    position: absolute;
    top: 0;
    left: 300px;
  }
</style>
